<!Doctype html>
<html>
<head>
<link rel='stylesheet' href='css/bootstrap.css' type='text/css' />
<link rel='stylesheet' href='css/bootstrap-responsive.css' type='text/css' />

<script src='js/jquery.js'></script>
<style>
@font-face {
      font-family: "facebook";
      src: url("font/facebook.otf");
    }
    #logo{
    font-family:facebook;
    color:#3B5998;
    }
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $('#content').focus(function() {
        	$("#content").animate({width:'400px',height:'100px'});
        });
       
    });
</script>
<script type="text/javascript" >
$(function() {
	 $('input[type="submit"]').attr('disabled','disabled');
     $('input[type="text"]').keyup(function(){
            if($(this).val != ''){
               $('input[type="submit"]').removeAttr('disabled');
            }
            
     });
$("#update_button").click(function() {

var boxval = $("#content").val();
var dataString = 'content='+ boxval;


$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');

$.ajax({
type: "POST",
url: "../controller/insertAjax.php",
data: dataString,
cache: false,
success: function(html){
$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
$('input[type="submit"]').attr('disabled','disabled');
$("#content").animate({width:'270px',height:'20px'});
}
});
 return false;
});
});
</script>


</head>
<body>


	<div class='container' id='con-nar'>
		<div class='row-fluid'>
			<div class='span12'>
			<h1 id='logo'>facebook</h1>
			
				<a href='javascript:void' id='status' class='btn btn-link'>Update Status</a> |  <a href='javascript:void' id='photo' class='btn btn-link'>Add Photo</a>
				
				<div id='statusdiv' class='well'>
				<p>What are you doing?</p>
					<form>
						<input type='text' class='input-xlarge' id='content'>
						<div class='clearfix'></div>
						<input type='button' value='Cancel' class='btn btn-danger' id='cancel'>&nbsp;<input type='submit' value='Post' class='btn btn-success' id='update_button'>
					
					</form>
				</div>
				
				<div id="flash"></div>
<ol id="update" class="timeline">
</ol>
			
			</div>
		
		</div>
	
	</div>
</body>

</html>
